<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/top::head">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="/common/top::header">

</div>
<div id="Content">
<div id="Main" style="display: flex;margin: auto;flex-direction: column;align-items: center">
    <form id="form1" method="post" action="EditInfoActionController" style="display: flex;flex-direction: column;align-items: center">
        <table >
            <tr>
                <td>昵称</td>
                <td><input name="nick_name" id="nick_name" th:value="${session.user.getNickName()}" onblur="nick_name_blur()"><span id="tip" style="position: absolute;"></span></td>
            </tr>
        </table>
        <input type="button" onclick="form1_click()" value="确定">
    </form>
    <form id="form2" method="post" action="EditPasswordActionController"  style="display: flex;flex-direction: column;align-items: center;margin-top:5em;">
        <table >
            <tr>
                <td>旧密码</td>
                <td><input name="old_password" id="old_password" value=""/></td>
            </tr>
            <tr>
                <td>新密码</td>
                <td><input name="new_password" id="new_password"value=""/></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input  id="repeat_password"value=""/></td>
            </tr>
        </table>
        <input type="button" onclick="form2_click()" value="确定">
    </form>
</div>
<script>
    var nick_name_exist=false;
    function form1_click(){
        var nick_name=document.getElementById("nick_name").value;
        if(nick_name_exist){
            alert("该昵称已存在");
            return;
        }
        if(!check_nick_name(nick_name)){
            alert("昵称格式不正确，应该为1-6位数字字母或汉字");
            return;
        }
        document.getElementById("form1").submit();

    }
    function check_nick_name(nick_name){
        var re=/^[\u4E00-\u9FA50-9a-zA-Z]{1,6}$/;
        if (!re.test(nick_name)) return false ;
        return true;
    }
    function form2_click(){
        var old_password=document.getElementById("old_password").value;
        var new_password=document.getElementById("new_password").value;
        var repeat_password=document.getElementById("repeat_password").value;
        if(!check_password(old_password)){
            alert("旧密码格式不正确，应该为3-12位数字或字母");
            return;
        }
        if(!check_password(new_password)){
            alert("新密码格式不正确，应该为3-12位数字或字母");
            return;
        }
        if(new_password!=repeat_password){
            alert("两次密码不一致");
            return;
        }
        document.getElementById("form2").submit();

        function check_password(password){
            var re=/^[0-9a-zA-Z]{3,12}$/;
            if (!re.test(password)) return false ;
            return true;
        }
    }
    function nick_name_blur(){
        var nick_name=document.getElementById("nick_name").value;
        if(!check_nick_name(nick_name)){
            $("#tip").html("格式错误").css("color","red");
            return;
        }
        UsernameIsExistServlet(nick_name);
    }
    function UsernameIsExistServlet(nick_name){
        $.ajax({
            url:ServerApi+"UsernameIsExistServlet",
            data:{
                nick_name:nick_name
            },
            success:function(res){
                res=JSON.parse(res);
                if(res.status!=200){
                    error(res.msg);
                } else {
                    nick_name_exist=res.data.exist;
                    if(nick_name_exist){
                        $("#tip").html("已存在").css("color","red");
                    } else {
                        $("#tip").html("合法").css("color","green");
                    }
                }
            },
            error:function (){
                error("服务器异常");
            }
        })
    }


</script>
</div>
<div th:replace="common/bottom">

</div>
</body>
</html>